@transform-timer: .3s;

.transfer-component-container {
  position: relative;
}
.component-active-begin {
  transform: translateX(36px);
  opacity: 0;
  transition: opacity @transform-timer, transform @transform-timer;
}
.component-inactive-begin {
  transform: translateX(0);
  opacity: 1;
  transition: opacity @transform-timer, transform @transform-timer;
}

.component-enter {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}
.component-enter-active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.component-exit {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.component-exit-active {
  position: absolute;
  right: 0;
  left: 0;
  transform: translateX(36px);
  opacity: 0;
  pointer-events: none;
}
.component-exit-hide {
  height: 0;
  overflow: hidden;
}
